<!DOCTYPE html >
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>智能养老云平台-登录</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/css/login.css}">
</head>
<body>
<div class="container">
    <div style="position: absolute;left:15%;top:5%;color:white;font-size:32px;font-weight: bold;">智能养老云平台</div>
    <content>
        <div class="login-box">
            <form id="loginForm">
                <div class="title">
                    <span>用户登录</span> <span>Login User</span>
                </div>
                <div>
                    <span class="subtitle">欢迎登录智能养老云平台-V1.0</span>
                </div>

                <div class="login-form" style="margin-bottom: 10px;">
                    <div class="form-row">
                        <div class="u-logo">
                            <div class="u-logo-img1"></div>
                        </div>
                        <input type="text" placeholder="账号" tabindex="1" name="accountNumber" id="accountNumber" autofocus
                               autocomplete="off">
                    </div>
                    <div class="form-row">
                        <div class="u-logo">
                            <div class="u-logo-img2"></div>
                        </div>
                        <input type="password" name="password" tabindex="2" id="password" placeholder="密码">
                    </div>
                    <div class="form-row" style="margin: 10px 0;">
                        <input type="checkbox" name="automatic" id="automatic" value="1"> <span
                            class="remember">自动登陆</span>
                        <span style="padding-left: 30px;color: red;font-weight:bold;font-size:14px; display: none;position: relative;top:-2px;"
                              id="msg"></span>
                        <div class="forget"><a style="color:white;" th:href="@{/register}">注册</a>&nbsp;&nbsp;<a style="color:white;" th:href="@{/changePassword}">忘记密码</a></div>
                    </div>
                    <div class="form-row" style="margin-top: 10px;">
                        <input type="text" name="captcha" tabindex="3" id="captcha" placeholder="验证码" class="yzm"
                               autocomplete="off">
                        <img th:src="@{/captcha}" class="captcha" alt="验证码">
                        <span class="huan">换一个</span>
                    </div>
                    <div class="form-row">
                        <button type="submit" class="login-btn">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </content>
    <footer>
        &copy; 2019 智能养老云平台
    </footer>
    <script th:src="@{/static/plugins/jquery.js}"></script>
    <script>
        $(function () {
            var $msg = $("#msg");
            /*绑定提交事件*/
            $("#loginForm").on('submit', function (e) {
                e.preventDefault();  //阻止默认提交事件
                var accountNumber = $("#accountNumber").val();
                var password = $("#password").val();
                var captcha = $("#captcha").val();
                var automatic = $("#automatic:checked").val();
                if (!accountNumber) {
                    $msg.text("请输入用户名");
                    $msg.show(); //删除 hide 样式表
                    return false;
                } else if (!password) {
                    $msg.text("请输入密码");
                    $msg.show(); //删除 hide 样式表
                    return false;
                } else if (!captcha) {
                    $msg.text("请输入验证码");
                    $msg.show(); //删除 hide 样式表
                    return false;
                }

                $.ajax({
                    url: '/login/verify',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        accountNumber: accountNumber,
                        password: password,
                        captcha: captcha,
                        automatic: automatic
                    },
                    success: function (msg) {
                        if (msg.code == 200) {
                            location.href = "/";
                        } else {
                            $("#captcha").val("")
                            $(".huan").click();
                            $msg.text(msg.message);
                            $msg.show(); //删除 hide 样式表
                        }
                    }
                });
            });


            $(".huan").on('click', refreshCode);

            //刷新验证码
            function refreshCode() {
                $(".captcha").attr("src", "/captcha");
            }
        });

    </script>
</div>
</body>
</html>